<template>
  <div class="Chief-Seven" chief-style-set ref="$Ten">
    <Title title="产品成本" ></Title>
    <div class="content-h-auto" chief-style-set>
      <div class="left-box">
        <bar-charts :pChartsOption="BarChartsOption"></bar-charts>
      </div>
      <div class="right-box">
        <pie-charts :pChartsOption="PieChartsOption"></pie-charts>
      </div>
    </div>
  </div>
</template>

<script>
import Title from "@/components/baseTitle";
import barCharts from "@/components/portalEcharts/BarEcharts";
import pieCharts from "@/components/portalEcharts/PieEcharts";
import { rptVisPrjProductcost, rptVisPrjProductcost2 } from "@/api/portalChief";
export default {
  name: "Chief-Seven",
  components: {
    Title, barCharts, pieCharts
  },
  data () {
    return {
      BarChartsOption: {},
      PieChartsOption: {}
    };
  },
  created () {
    rptVisPrjProductcost(this.$store.state.user.project.projectNo).then(res => {
      this.disposeBar(res);
    });
    rptVisPrjProductcost2(this.$store.state.user.project.projectNo).then(res => {
      this.disposePie(res);
    });
  },
  methods: {
    // 处理柱形图数据
    disposeBar (res) {
      if (res.status === 200) {
        let data = res.data.data;
        if (data.length > 0) {
          this.BarChartsOption = {
            xAxisNameList: [],
            BarList: []
          };
          this.BarChartsOption.xAxisNameList = Object.keys(data[0].data);
          data.forEach(item => {
            this.BarChartsOption.BarList.push({
              name: item.name,
              barWidth: 20,
              data: Object.values(item.data)
            });
          });
        } else {
          this.BarChartsOption = {};
        }
      }
    },
    // 处理饼图数据
    disposePie (res) {
      if (res.status === 200) {
        this.PieChartsOption = {
          data: []
        };
        let data = res.data.data;
        let colorList = ["#35568C", "#4C85D2", "#8EBEFF", "#8D6FD3", "#C13BAC", "#F76596", "#FA9648", "#FFD300", "#B5CE8A", "#3BC0BB"];
        Object.keys(data).forEach((item, index) => {
          this.PieChartsOption.data.push({
            value: data[item]["金额"],
            name: item,
            color: colorList[index]
          });
        });
      }
    }
  }
};
</script>

<style lang="less">
.Chief-Seven{
  .content-h-auto{
    >div{
      display: inline-block;
      width: 50%;
      position: absolute;
      top: 0;
      bottom: 0;
    }
  }
}
</style>